<template>
    <div class="detail-page">
        <!-- Header组件 -->
        <Header title="办公室加班申请表" theme="light">
            <template v-slot:left>
                <span class="iconfont icon-fanhui" @click="$router.push('/home')"></span>
            </template>
        </Header>

        <!-- 用户信息 -->
        <div class="user">
            <div class="pic">
                <img :src="task.user.pic" alt="">
            </div>
            <div class="text">
                <div><span>申请人姓名 </span> <span>{{task.user.name}}</span></div>
                <div><span>直接主管 </span> <span>{{task.user.leader}}</span></div>
            </div>
        </div>

        <!-- 加班申请表 -->
        <div class="form">
            <div class="title">申请信息</div>
            <div class="block">
                <div>加班日期<span>*</span></div>
                <div>{{task.date}}</div>
            </div>
            <div class="block">
                <div>加班开始时间<span>*</span></div>
                <div>{{task.starttime}}</div>
            </div>
            <div class="block">
                <div>加班截止时间<span>*</span></div>
                <div>{{task.endtime}}</div>
            </div>
            <div class="block">
                <div>共计时数</div>
                <div>{{ Math.floor( (new Date(task.endtime)-new Date(task.starttime))/(60*60*1000) ) }}</div>
            </div>

            <div class="block">
                <div>加班事由</div>
                <div>{{task.desc}}</div>
            </div>
            
        </div>
        
        <!-- 按钮 -->
        <div class="btns">
            <div class="btn" @click="$router.push('/home')">取消</div>
            <div class="btn submit" >同意</div>
        </div>
    </div>
</template>

<script>

import {mapState} from 'vuex'

export default {
    data(){
        return {

        }
    },
    computed:{
        ...mapState(['taskList']),
        task:function(){
            console.log(this.$route.params.id);
            return this.taskList.find( (item)=>{ return item.id === this.$route.params.id  } )
        }
    }
}
</script>
<style scoped>
.user{
    padding: 40px 20px ;
    display: flex;
    font-size: 14px;
    align-items: flex-start;
    background-color: green;
    color: white;
    border-radius:0 0 20px 20px;
}
.user .pic{
    width: 50px;
    margin-right: 20px;
}
.user .pic img{
    width: 100%;
    border-radius: 50%;
}
.user .text{
    line-height: 20px;
    flex: 1;
}
.form{
    background-color: white;
    padding: 20px 15px;
    margin: 0 20px;
    position: relative;
    top: -30px;
    border-radius: 10px;
}
.block{
    margin: 30px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.block span{
    color: red;
}
.block input{
    padding-left: 20px;
    outline: none;
    height: 30px;
    border: 1px solid #f5f5f5;
}

.btns{
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color: white;
}
.btns .btn{
    flex: 1;
    text-align: center;
}
.btns .btn.submit{
    background-color: green;
    color: white;
}
</style>